<template>
  <div class="personal-center">
    <!-- 头部 -->
    <el-container class="personalheader">
      <el-header class="personalcenter">个人中心</el-header>
      <el-main class="selfmain">
        <el-descriptions class="self" title="个人信息" :column="3" direction="vertical" :style="blockMargin" border>
          <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ user.realName }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ user.sex }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ user.age }}</el-descriptions-item>
          <el-descriptions-item label="所属科室">{{ user.section }}</el-descriptions-item>
          <el-descriptions-item label="住址">{{ user.address }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ user.mailbox }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ user.phone }}</el-descriptions-item>
        </el-descriptions>
        <el-button type="danger" class="exitbutton" @click="exit">退出登录</el-button>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getUserInfo, getCurrentUser } from '../../api/sessions'
export default {
  name: 'personal',
  data() {
    return {
      user: {
        username: '',
        realName: '',
        sex: '',
        age: '',
        section: '',
        address: '',
        mailbox: '',
        phone: '',
      },
    }
  },
  methods: {
    exit() {
      sessionStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      this.$router.push('/login')
    }
  },
  async mounted() {
    const result = await getCurrentUser()
    console.log('当前', result)
    this.user = result.user
    // const result = await getUserInfo().then(res => {
    //   console.log('res:',res);
    //   const user = localStorage.getItem('userinfo')
    //   console.log('user:',user);
    //   // 使用从API调用接收的数据更新用户对象
    //   this.user.username = res.data.username;
    //   this.user.realname = res.data.realname;
    //   this.user.sex = res.data.sex;
    //   this.user.age = res.data.age;
    //   this.user.section = res.data.section;
    //   this.user.address = res.data.address;
    //   this.user.mailbox = res.data.mailbox;
    // })
  }
}
</script>

<style lang="less">
.personal-center {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .personalheader {

    // background-color: #337ecc;
    .personalcenter {
      color: white;
      text-align: center;
      font-size: 50px;
      font-weight: large;
      border-radius: 35px;
      width: 300px;
      height: 60px;
      font-style: italic;
    }
  }

}

.self {
  width: 1200px;
}

.el-descriptions {
  margin-top: 20px;
}
</style>